<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
	<div class="centermap">
		<div class="mapwrap">
			<dv-border-box-13>
				<div id="tdMap" class="tdMap"></div>
			</dv-border-box-13>
			<div class="button-block" v-if="pageflag">
				<div v-for="(item, index) in stations" :key="index" :class="index == activeIndex ? 'active' : ''"
					@click="btnClick(index, item)">
					{{ item.deptName }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { currentGET } from "api/modules";
	import station from './station.js';
	export default {
		data() {
			return {
				stations: [],
				curStation: {},
				pageflag: false,
				activeIndex: 0,
				curLat: 45.846129,
				curLng: 126.834825,
				curStation: '主站',
			};
		},
		created() {
			this.getData();
		},
		mounted() {
			this.onLoad()
		},
		methods: {
			getData() {
				currentGET("plots").then((res) => {
					if (res.flag) {
						this.pageflag = true;
						this.stations = res.data.stations;
						this.curStation = res.data.curStation;
					} else {
						this.pageflag = false;
						this.$Message.warning(res.msg);
					}
				});
			},
			btnClick(index, item) {
				this.curStation = item;
				this.activeIndex = index;
				this.getMaps(item.latitude, item.longitude, item.deptName)
				station.$emit("stationId",item.deptId);
			},
			onLoad() {
				var T = window.T;
				let imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' +
					'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
					'&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=7e946ea3236c73aa39367a086a5c463d';
				let lay = new T.TileLayer(imageURL, {
					minZoom: 1,
					maxZoom: 16
				});
				let config = {
					layers: [lay],
				};

				this.map = new T.Map('tdMap', config); // 地图实例
				this.map.centerAndZoom(new T.LngLat(this.curLng, this.curLat), 3);
				// //允许鼠标双击放大地图
				this.map.enableScrollWheelZoom();

				//创建地图图层对象
				let mapTypeSelect = [{
						'title': '卫星混合',
						'http': 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
						'layer': 'TMAP_HYBRID_MAP'
					}, {
						'title': '地图', //地图控件上所要显示的图层名称
						'icon': 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
						'layer': window.TMAP_NORMAL_MAP //地图类型对象，即MapType。
					},
					{
						'title': '卫星',
						'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
						'layer': window.TMAP_SATELLITE_MAP
					}, {
						'title': '地形',
						'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
						'layer': window.TMAP_TERRAIN_MAP
					},
					{
						'title': '地形混合',
						'icon': ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
						'layer': window.TMAP_TERRAIN_HYBRID_MAP
					}
				];
				var ctrl = new T.Control.MapType({
					mapTypes: mapTypeSelect
				}); // 初始化地图类型选择控件
				this.map.addControl(ctrl); //添加地图选择控件
				this.map.setMapType(window.TMAP_HYBRID_MAP); // 设置地图位地星混合图层

				this.getMaps(this.curLng, this.curLat, this.curStation)
			},
			getMaps(curLng, curLat, stationName) {
				let T = window.T;
				//设置显示地图的中心点和级别
				this.map.clearOverLays();
				this.map.centerAndZoom(new T.LngLat(curLng, curLat), 15);

				let position = new T.LngLat(curLng, curLat)
				let icon = new T.Icon({
					iconUrl: require('@/assets/img/xhq.svg'),
					iconSize: new T.Point(19, 27),
					iconAnchor: new T.Point(10, 25),
				});
				let label = new T.Label({
					text: stationName, //文本标注的内容
					position: position, //文本标注的地理位置
					offset: new T.Point(-40, 20) //文本标注的位置偏移值
				})
				let marker = new T.Marker(position, {
					icon: icon
				})
				this.map.addOverLay(label);
				this.map.addOverLay(marker);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.centermap {
		margin-bottom: 30px;

		.mapwrap {
			height: 613px;
			width: 100%;
			box-sizing: border-box;
			position: relative;

			.tdMap {
				width: 96%;
				height: 95%;
				position: absolute;
				top: 18px;
				left: 15px;
			}

			.button-block {
				height: 30px;
				width: 710px;
				margin: 5px 5px 18px 5px;
				display: flex;
				justify-content: space-between;

				>div {
					font-size: 16px;
					width: 95px;
					height: 100%;
					color: #00f7f6;
					font-weight: 700;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #00eded;
					background-size: 100% 100%;
					cursor: pointer;
					box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
						0 0 6px rgba(0, 237, 237, 0.4);
				}

				>.active {
					// color: #07e18c;
					// background-image: url('../../../assets/images/zd-yxz.png');
					color: #fff;
					background: rgba(76, 245, 255, .4);
				}
			}
		}
	}
</style>